<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/json.p.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            border: 1px solid #000;
            display: inline-block;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        #txt{
            height: 100%;
            border: none;
        }
        ul{
            list-style: none;
        }
        li{
            border: 1px solid #000;
        }
        .actived{
            background: skyblue;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" id="txt">
        <ul>
            <li>111</li>
        </ul>
    </div>


    <script>
        var oBox=document.querySelector(".box");
        var oTxt=document.querySelector("#txt");
        var oUl=document.querySelector("ul");

        oTxt.oninput=function(){
            oUl.style.display="block";
            var str=this.value;
            if(str==""){
                return;
            }

            $.jsonp({
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:{
                    wd:str
                },
                jsonp:"cb",
                success(res){
                    let {s}=res;
                    var strHtml="";
                    s.forEach(item => {
                        strHtml+=`<li>${item}</li>`
                    });
                    oUl.innerHTML=strHtml;
                }
            })
        }


        oUl.addEventListener("click",function(evt){
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(ele.nodeName!="LI"){
                return;
            }
            oTxt.value=ele.innerText;
            oUl.style.display="none";
        })

        oUl.addEventListener("mouseover",function(evt){
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(ele.nodeName!="LI"){
                return;
            }
            Array.from(oUl.children).forEach((item)=>{
                item.className="";
            })
            ele.className="actived";
        })
        oUl.addEventListener("mouseout",function(evt){
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(ele.nodeName!="LI"){
                return;
            }
            Array.from(oUl.children).forEach((item)=>{
                item.className="";
            })
        })
    </script>
</body>
</html>